<template>
  <div>
<h1>用户还款</h1>
<table class="table table-bordered">
  <tr>
    <td>借款名称</td>
    <td>{{state.BName}}</td>
  </tr>
  <tr>
    <td>还款金额</td>
    <td>{{state.UBMoney}}</td>
  </tr>
  <tr>
    <td>借款利息</td>
    <td>{{state.INName}}%</td>
  </tr>
  <tr>
    <td>借款金额+本金</td>
    <td>{{(Number(state.UBMoney)+state.UBMoney*state.INName/100).toFixed(2)}}</td>
  </tr>
  <tr>
    <td>用户还款金额</td>
    <td><input type="text" v-model="UBRMoney"</td>
  </tr>
  <tr>
    <td></td>
    <td><input type="button" value="确认还款" @click="okl"></td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted, toRaw } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from '../store/use';
const store = useStore();
const router = useRouter();
const route = useRoute();

let data:any=reactive({
  state:{},
  UBRMoney:''
})

let {state,UBRMoney}=toRefs(data)

onMounted(()=>{
  getDate()
})

const getDate=()=>{
axios({
  url:'/api/Users/GetUserBorrow',
  method:'get',
  params:{
    UBId:route.query.UBId
  }
})
.then(res=>{
  console.log(res);
  state.value=res.data.data[0]
})
.catch(err=>{
  console.log(err);
  
})
}

const okl=()=>{
axios({
  url:'/api/Users/PostAddUserBorrowRedeem',
  method:'post',
  data:{
    UBId:route.query.UBId,
    UBRMoney:UBRMoney.value
  }
})
.then(res=>{
  console.log(res);
  if(res.data.data>0){
    alert('还款成功');
    router.push("/putongRedeem")
  }
  else{
    alert('还款失败');
    return;
  }
})
.catch(err=>{
  console.log(err);
  
})
}
</script>

<style scoped>

</style>